<meta charset="utf-8">
<link rel="stylesheet" href="./myui.css">

<div id="root">
    <h1>商品创建</h1>
    <h2>表单组件</h2>
    <div>
        <my-formdata :state='false' ref='a'></my-formdata>
        <my-formdata :state='false' ref='b'></my-formdata>
    </div>
    <button @click='formSubmitFn'>提交</button>
    <hr>   
    <h2>导航栏组件</h2>
    <my-nav-bar @click-left='leftClickFn' @click-right='rightClickFn' :title='title'>搜索</my-nav-bar>

    <hr>   
    <h2>按钮组件</h2>
    <my-button type="primary" content='主要按钮'></my-button>
    <my-button type="info" content='信息按钮'></my-button>
    <my-button type="default" content='默认按钮'></my-button>
    <my-button type="warning" content='警告按钮'></my-button>
    <my-button type="danger" content='危险按钮'></my-button>

    <hr>   
    <h2>loading组件</h2>
    <my-loading :state='state'></my-loading>
    <button @click='loadingFn'>点击显示或关闭loading</button>
    <hr>
    <h2>dialog组件</h2>
    <button @click='visible=true'>显示对话框</button>
    <my-dialog :visible='visible' @close='visible=false' :title='title'><input type='text' /></my-dialog>
    <hr>
    <h2>分页组件</h2>
    <my-page :pagesize='pageSize' :total='total' @click='pageNumFn'></my-page>

    <hr>
    <h2>表格组件iview-UI</h2>
    <my-table :columns='usersColumns' :datas='usersData'></my-table>

    <hr>
    <h2>表格组件element-UI</h2>
    <my-table2 :data="tableData">
        <my-table-column prop="id" label="编号1"></my-table-column>
        <my-table-column prop="id" label="编号2"></my-table-column>
        <my-table-column prop="name" label="姓名"></my-table-column>
        <my-table-column prop="age" label="年龄"></my-table-column>
        <my-table-column label="性别">
            <template slot-scope="item"> {{ item.sex == 1 ? '女' : '男' }} </template>
        </my-table-column>

    </my-table2>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./myui.js"></script>
<script>
const vm = new Vue({
    el: "#root",
    data: {
        state:false,
        title:'商品创建',
        visible:false,
        pageSize:2,
        total:10,
        //用户表格
        usersColumns:[
            {title:'编号',key:'id'},
            {title:'姓名',key:'uname'},
            {title:'年龄',key:'age'},
            {title:'工龄',key:'year'},
            {title:'性别',key:'sex',
            render:(row)=>`<b>${row.sex===1?'男':'女'}</b>`}
        ],
        usersData:[
            {id:1,uname:'张三',age:19,year:2,sex:1},
            {id:2,uname:'李四',age:27,year:3,sex:0},
            {id:3,uname:'王五',age:88,year:4,sex:0},
            {id:4,uname:'赵六',age:98,year:1,sex:1}
        ],
        tableData: [
        { id: 1, name: "张三", age: 3, sex: 2 },
        { id: 2, name: "赵四", age: 18, sex: 2 },
        { id: 3, name: "王五", age: 35, sex: 1 },
        { id: 4, name: "王六", age: 32, sex: 1 },
      ],

    },
    methods:{
        formSubmitFn(){
           console.log(this.$refs.a.formdata);
           console.log(this.$refs.b.formdata);
           
        },
        leftClickFn(){
            alert('你点击左边拉')
        },
        rightClickFn(){
            alert('你点击right啦')
        },
        loadingFn(){
            this.state=this.state?false:true
        },
        pageNumFn(pageNum){
            console.log('你点击了',pageNum);
            
        }
    }
})
</script>